<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行管理系统 - 登录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            background: #f0f2f5;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            width: 360px;
            padding: 40px 30px 30px 30px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
        }
        .login-title {
            text-align: center;
            font-size: 24px;
            color: #409EFF;
            margin-bottom: 30px;
            font-weight: bold;
        }
        .el-form-item__label {
            font-weight: bold;
        }
        .el-button--primary {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app" class="login-container">
    <div class="login-title">银行管理系统登录</div>
    <el-form :model="loginForm" :rules="loginRules" ref="loginForm" @keyup.enter.native="handleLogin">
        <el-form-item label="银行卡号" prop="cardID">
            <el-input v-model="loginForm.cardID" maxlength="16" placeholder="请输入银行卡号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input v-model="loginForm.pass" type="password" maxlength="32" placeholder="请输入银行卡密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            loginForm: {
                cardID: '',
                pass: ''
            },
            loginRules: {
                cardID: [
                    { required: true, message: '请输入银行卡号', trigger: 'blur' },
                    { min: 16, max: 16, message: '银行卡号为16位', trigger: 'blur' }
                ],
                pass: [
                    { required: true, message: '请输入银行卡密码', trigger: 'blur' }
                ]
            }
        },
        methods: {
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (!valid) return;
                    axios.post('/api/auth/login', {
                        cardID: this.loginForm.cardID,
                        pass: this.loginForm.pass
                    }).then(res => {
                        if (res.data && (res.data.code === 200 || res.data.code === 0)) {
                            localStorage.setItem('loginCardID', this.loginForm.cardID);
                            window.location.href = 'customer.html';
                        } else {
                            this.$message.error(res.data.message || '登录失败');
                        }
                    }).catch(() => {
                        this.$message.error('登录请求失败');
                    });
                });
            }
        }
    });
</script>
</body>
</html>